
 <template>
  <div>
    <el-button @click="resetDateFilter">清除日期过滤器</el-button>
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    <el-table
      ref="multipleTable"
      :data="paginatedData"
      stripe
      border
      max-height="380"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" :index="indexMethod"></el-table-column>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>省份: {{ scope.row.province }}</p>
            <p>市区: {{ scope.row.city }}</p>
            <p>地址: {{ scope.row.address }}</p>
            <p>邮编: {{ scope.row.zip }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        sortable
        column-key="date"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
    </el-table>

    <custom-pagination
      :total="filteredTotal"
      :current-page="currentPage"
      :page-size="pageSize"
      @update:currentPage="currentPage = $event"
      @update:pageSize="pageSize = $event"
    />
  </div>
</template>

<script>
import CustomPagination from '@/components/common/CommonPagination.vue';

export default {
  components: {
    CustomPagination
  },
  data () {
    return {
      multipleSelection: [],
      tableData: [
        { date: '2016-05-03', name: '王小虎3', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-02', name: '王小虎2', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-04', name: '王小虎4', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-01', name: '王小虎1', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-08', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-06', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-07', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-09', name: '王小虎5', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-10', name: '王小虎6', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-11', name: '王小虎7', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-12', name: '王小虎8', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-13', name: '王小虎9', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-14', name: '王小虎10', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-15', name: '王小虎11', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-16', name: '王小虎12', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-17', name: '王小虎13', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-18', name: '王小虎14', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
        { date: '2016-05-19', name: '王小虎15', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },
      ],
      selectedItems: [],
      pageSize: 10,
      currentPage: 1,
      filters: {}
    };
  },
  computed: {
    filteredData () {
      let data = this.tableData;
      if (this.filters.date) {
        data = data.filter(item => item.date === this.filters.date);
      }
      return data;
    },
    paginatedData () {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredData.slice(start, end);
    },
    filteredTotal () {
      return this.filteredData.length;
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    resetDateFilter () {
      this.$refs.multipleTable.clearFilter('date');
      delete this.filters.date;
    },
    clearFilter () {
      this.$refs.multipleTable.clearFilter();
      this.filters = {};
    },
    filterHandler (value, row, column) {
      this.filters[column.property] = value;
    },

    indexMethod (index) {
      // 序号从1开始
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },

  }
};
</script>

<style scoped>
</style>



